<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .message {
        width: 600px;
        min-height: 400px;
        padding: 15px;
        border: 1px solid #ccc;
    }
    .message .a {
        text-align: right;
    }
    .message li {
        line-height: 30px;
        list-style: none;
    }
    </style>
</head>
<body>
    <h1>在线聊天室</h1>
    <div class="wrap">
        <input type="text" class="input">
        <button class="btn-send">发送</button>
    </div>
    <ul class="message"></ul>
    <script>
    window.onload = () => {
        let ws; // VO
        let elInput = document.querySelector('.input');
        let elUl = document.querySelector('.message');
        let msgData = {
            fromUserId: Math.ceil(Math.random()*10000),
            content: '',
        }
        function connectWebsocket() {
            // html5  启动一个 1315 websocket 协议
            ws = new WebSocket('ws://localhost:1316');
            ws.onmessage = (msg) => {
                const { content } = JSON.parse(msg.data);
                elUl.innerHTML += `<li class="b">${content}</li>`;
            }
        }
        connectWebsocket();
        document
            .querySelector('.btn-send')
            .addEventListener('click', () => {
                let msg = {
                    ...msgData,
                    content: elInput.value,
                    type: 'text'
                }
                
                ws.send(JSON.stringify(msg));
                elInput.value = '';
            })
    }
    </script>
</body>
</html>